<template>
  <div id="zhfxyp" style="padding-top:10px">
        <div style="float:right">
          <el-date-picker v-model="addyearZHFXYP" type="year" placeholder="选择要添加的年度" value-format="yyyy" format="yyyy"></el-date-picker>
          <el-tooltip class="item" effect="dark" content="添加该年度综合分析研判" placement="top">
            <el-button type="primary" icon="el-icon-circle-plus-outline" :loading="addloading" @click="addZhfxyp">添加</el-button>
          </el-tooltip>
        </div>
      <div v-if="JSON.stringify(zhfxypList)!=='[]'">
        <div style="padding-left:10px">年度：
          <el-select v-model="zhfxypYear" placeholder="请选择" @change="getZhfxypDetail(true)" style="width:120px">
            <el-option
              v-for="(item,index) in zhfxypList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-tooltip class="item" effect="dark" content="删除该年度综合分析研判" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="delZhfxyp">删除</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="导出该年度综合分析研判" placement="top">
            <el-button type="success" icon="el-icon-download" @click="exportword">导出</el-button>
          </el-tooltip>
        </div>
        <div class="persondetail" style="margin-top:20px" v-show="JSON.stringify(mybanzi)!=='{}'">
          <el-tabs v-model="banzitab">
            <el-tab-pane :label="mybanzi.unitname+' 领导班子情况'">
              <div style="padding:10px;">
                <el-input type="textarea" :rows="8" v-model="banzicontent" maxlength="4000" show-word-limit></el-input>
                <el-button type="primary" style="margin-top:10px;" icon="el-icon-document-checked" @click="saveBanzi" :loading="savebanziloading">保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="附件列表">
              <el-table height="238px" :data="bzfilename">
                <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth"></el-table-column>
                <el-table-column label="文件名">
                  <template slot-scope="scope">
                    {{scope.row}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button size="small" @click="delbzfj(bzfilepathname[scope.$index])" type="text" icon="el-icon-download">删除</el-button>
                    <el-button size="small" @click="bzfjdownload(bzfilepathname[scope.$index])" type="text" icon="el-icon-download">下载</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-upload class="upload-demo" :on-success="bzuploadsuccess" name="file" :file-list="bzfilelist"
                :action="this.$http.defaults.baseURL + 'common/fenxiyanpan/upload/'+this.mybanzi.id" with-credentials :on-error='uploaderror'>
                <el-button type="primary" icon="el-icon-paperclip">上传附件</el-button>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="persondetail" style="margin-top:20px" v-if="JSON.stringify(mygeren)!=='{}'">
          <el-tabs v-model="gerentab">
            <el-tab-pane :label="personname+' 同志情况'">
              <div style="padding:10px;">
                <el-input type="textarea" :rows="8" v-model="gerencontent" maxlength="4000" show-word-limit></el-input>
                <el-button type="primary" style="margin-top:10px;" icon="el-icon-document-checked" @click="saveGeren" :loading="savegerenloading">保存</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="附件列表">
              <el-table height="238px" :data="grfilename">
                <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth"></el-table-column>
                <el-table-column label="文件名">
                  <template slot-scope="scope">
                    {{scope.row}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button size="small" @click="delgrfj(grfilepathname[scope.$index])" type="text" icon="el-icon-download">删除</el-button>
                    <el-button size="small" @click="grfjdownload(grfilepathname[scope.$index])" type="text" icon="el-icon-download">下载</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-upload class="upload-demo" :on-success="gruploadsuccess" name="file" :file-list="grfilelist"
                :action="this.$http.defaults.baseURL + 'common/fenxiyanpan/upload/'+this.mygeren.id" with-credentials :on-error='uploaderror'>
                <el-button type="primary" icon="el-icon-paperclip">上传附件</el-button>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div v-else style="line-height:40px;font-size:var(--size14);padding-left:10px">无综合分析研判信息</div>
  </div>
</template>
<script>
export default {
  watch: {
    personId: {
      handler (val) {
        this.personId = val
        this.getZhfxypList(val)
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    personname: {
      handler (val) {
        this.personname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    unitname: {
      handler (val) {
        this.unitname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  props: {
    personId: '',
    personname: '',
    unitname: ''
  },
  data () {
    return {
      gerentab: '',
      banzitab: '',
      zhfxypDetail: {},
      fileList: [],
      zhfxypYear: '',
      addyearZHFXYP: '',
      zhfxypList: [],
      addloading: false,
      savebanziloading: false,
      savegerenloading: false,
      banzicontent: '',
      gerencontent: '',
      bzfilelist: [],
      grfilelist: [],
      mybanzi: {},
      mygeren: {},
      bzfilename: [],
      bzfilepathname: [],
      grfilename: [],
      grfilepathname: []
    }
  },
  methods: {
    delbzfj (filepathname) {
      this.$confirm('确定要删除该附件吗?', '提示', {
        type: 'success'
      }).then(() => {
        let para = {
          id: this.mybanzi.id,
          filepathname: filepathname
        }
        let _this = this
        this.$http
          .post(`/common/fenxiyanpan/removefj/`, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.$message({
                message: '删除成功',
                type: 'success'
              })
              _this.getZhfxypDetail()
            } else {
              _this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
          })
          .catch(function (error) {
            _this.$message({
              message: '删除失败:' + error,
              type: 'error'
            })
          })
      })
    },
    delgrfj (filepathname) {
      this.$confirm('确定要删除该附件吗?', '提示', {
        type: 'success'
      }).then(() => {
        let para = {
          id: this.mygeren.id,
          filepathname: filepathname
        }
        let _this = this
        this.$http
          .post(`/common/fenxiyanpan/removefj/`, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.$message({
                message: '删除成功',
                type: 'success'
              })
              _this.getZhfxypDetail()
            } else {
              _this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
          })
          .catch(function (error) {
            _this.$message({
              message: '删除失败:' + error,
              type: 'error'
            })
          })
      })
    },
    exportword () {
      window.open(this.$http.defaults.baseURL + 'common/fenxiyanpan/wordfile/' + this.personId + '/' + this.zhfxypYear)
    },
    grfjdownload (filepathname) {
      window.open(this.$http.defaults.baseURL + 'common/fenxiyanpan/file/' + this.mygeren.id + '/' + filepathname)
    },
    bzfjdownload (filepathname) {
      window.open(this.$http.defaults.baseURL + 'common/fenxiyanpan/file/' + this.mybanzi.id + '/' + filepathname)
    },
    uploaderror (err) {
      console.log('具体错误')
      console.log(err)
      this.$message({
        message: '上传失败：' + err,
        type: 'error'
      })
    },
    beforeAvatarUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isXLS = file.name.indexOf('.xls') > 0
      const isXLSX = file.name.indexOf('.xlsx') > 0
      // const isLt5M = file.size / 1024 / 1024 < 500
      if (!isXLS && !isXLSX) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
      }
      // if (!isLt5M) {
      //   this.$message.error('上传文件大小不能超过 500MB!')
      // }
      // return isZIP && isLt5M
      return isXLS || isXLSX
    },
    // 获取用户列表
    bzuploadsuccess (res) {
      this.getZhfxypDetail()
      this.bzfilelist = []
    },
    gruploadsuccess (res) {
      this.getZhfxypDetail()
      this.grfilelist = []
    },
    getZhfxypList (id, flag) {
      var _this = this
      this.zhfxypList = []
      this.$http
        .get(`/common/fenxiyanpan/` + id)
        .then(function (response) {
          _this.zhfxypList = response.data
          if (flag) {
            _this.getZhfxypDetail()
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    addZhfxyp () {
      if (this.addyearZHFXYP && this.addyearZHFXYP !== '') {
        let para = {
          idnumber: this.personId,
          unitname: this.unitname,
          name: this.personname,
          theyear: this.addyearZHFXYP
        }
        let _this = this
        this.addloading = true
        this.$http
          .post(`/common/addfenxiyanpan/`, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.zhfxypYear = _this.addyearZHFXYP
              _this.banzicontent = ''
              _this.gerencontent = ''
              _this.getZhfxypList(_this.personId, true)
              _this.$message({
                message: '添加成功',
                type: 'success'
              })
            } else {
              _this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
            _this.addloading = false
          })
          .catch(function (error) {
            _this.$message({
              message: '添加失败:' + error,
              type: 'error'
            })
            _this.addloading = false
          })
      } else {
        this.$message({
          message: '请选择年度',
          type: 'error'
        })
      }
    },
    delZhfxyp () {
      if (this.zhfxypYear && this.zhfxypYear !== '') {
        this.$confirm('确定要删除该年度综合分析研判信息吗?', '提示', {
          type: 'success'
        }).then(() => {
          let para = {
            id1: this.mybanzi.id,
            id2: this.mygeren.id
          }
          let _this = this
          this.delloading = true
          this.$http
            .post(`/common/removefenxiyanpan/`, para)
            .then(function (response) {
              if (response.data.success === true) {
                _this.getZhfxypList(_this.personId)
                _this.zhfxypYear = ''
                _this.mybanzi = {}
                _this.mygeren = {}
                _this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              } else {
                _this.$message({
                  message: response.data.message,
                  type: 'error'
                })
              }
              _this.delloading = false
            })
            .catch(function (error) {
              _this.$message({
                message: '删除失败:' + error,
                type: 'error'
              })
              _this.delloading = false
            })
        })
      } else {
        this.$message({
          message: '请选择要删除的年度',
          type: 'error'
        })
      }
    },
    saveBanzi () {
      let para = {
        id: this.mybanzi.id,
        content: this.banzicontent
      }
      let _this = this
      this.savebanziloading = true
      this.$http
        .post(`/common/savefenxiyanpan/`, para)
        .then(function (response) {
          if (response.data.success === true) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
            _this.getZhfxypDetail()
          } else {
            _this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          _this.savebanziloading = false
        })
        .catch(function (error) {
          _this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
          _this.savebanziloading = false
        })
    },
    saveGeren () {
      let para = {
        id: this.mygeren.id,
        content: this.gerencontent
      }
      let _this = this
      this.savegerenloading = true
      this.$http
        .post(`/common/savefenxiyanpan/`, para)
        .then(function (response) {
          if (response.data.success === true) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
            _this.getZhfxypDetail()
          } else {
            _this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          _this.savegerenloading = false
        })
        .catch(function (error) {
          _this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
          _this.savegerenloading = false
        })
    },
    getZhfxypDetail (flag) {
      var _this = this
      this.mybanzi = {}
      this.mygeren = {}
      this.$http
        .get(`/common/fenxiyanpan/` + _this.personId + '/' + _this.zhfxypYear)
        .then(function (response) {
          _this.mybanzi = response.data.banzi
          if (flag) {
            _this.banzicontent = _this.mybanzi.thecontent
          }
          if (_this.mybanzi.filepathname) {
            _this.bzfilepathname = JSON.parse(_this.mybanzi.filepathname)
          } else {
            _this.bzfilepathname = []
          }
          if (_this.mybanzi.filename) {
            _this.bzfilename = JSON.parse(_this.mybanzi.filename)
          } else {
            _this.bzfilename = []
          }
          _this.mygeren = response.data.geren
          if (flag) {
            _this.gerencontent = _this.mygeren.thecontent
          }
          if (_this.mygeren.filepathname) {
            _this.grfilepathname = JSON.parse(_this.mygeren.filepathname)
          } else {
            _this.grfilepathname = []
          }
          if (_this.mygeren.filename) {
            _this.grfilename = JSON.parse(_this.mygeren.filename)
          } else {
            _this.grfilename = []
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
  }
}
</script>
<style>
#zhfxyp .el-table td, .el-table th{
  padding:2px 0;
}
#zhfxyp .el-textarea__inner{
  font-size:var(--size18) !important;
  color:#000 !important;
}
</style>
